<template>
  <div class="flex flex-col h-full">
    <SearchContainer show-export @reset="() => formRef.resetFields()" @search="getData" @export="exportRef.$el.querySelector('button').click()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item name="dateRange" label="挂号日期">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="客户来源" class="w-[300px]">
          <SelectCustomerSource v-model:value="formState.pathId" />
        </a-form-item>
        <a-form-item label="咨询师" class="w-[300px]">
          <SelectTable
            v-model:value="formState.zxsName"
            :disabled="formState.isCode"
            type="员工"
            page-size="999"
            :search-params="{ emplbid: '14' }"
            @select="onSelectEmployee('zxs', $event)"
            @clear="formState.zxs = ''"
          />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="flex-1">
      <a-space ref="exportRef" class="hidden">
        <BaseExport type="报表" name="接待月度统计" code="000468" is-show-time :search-params="formState">导出</BaseExport>
      </a-space>
      <BaseTable row-key="id" column-code="000468" :loading="loading" :data-source="tableData" bordered fill :indent-size="24" :scroll="{ x: 1800 }">
        <template #expandIcon="{ expanded, record, onExpand }">
          <component
            :is="Icon[expanded ? 'CaretDownOutlined' : 'CaretRightOutlined']"
            v-if="record.children?.length"
            class="px-1"
            @click="onExpand(record, $event)"
          />
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import * as Icon from '@ant-design/icons-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import SelectTable from '@/components/SelectTable'

const exportRef = ref(null)
const formRef = ref(null)
const formState = ref({
  dateRange: [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const { loading, tableData, getData } = useTable({
  url: '/operation/opex/receptionMonthlyQuery',
  params: formState.value,
  pagination: false,
  immediate: true,
  formatParams: (params) => {
    return {
      ...params,
      stdate: params.dateRange?.[0],
      eddate: params.dateRange?.[1]
    }
  }
})

const onSelectEmployee = (key, select) => {
  formState.value[key + 'Name'] = select.empName
  formState.value[key] = select.empId
}
</script>
